<template>
  <div class="lowerBrickList">
    <div class="backBtn">
      <div class="back-left" @click="goBack">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </div>
    </div>
    <el-table :data="tableData" stripe style="width: 100%" v-loading="loading" border>
      <template v-for="(item,index) in allData">
        <el-table-column
          :key="index"
          :prop="item.value"
          v-if="item.value!=='opt' && item.value!=='amount'"
          :label="item.label"
          align="center"
        ></el-table-column>

        <el-table-column
          :key="index"
          v-if="item.value=='amount'"
          :label="item.label"
          align="center"
        >
          <template slot-scope="scope">
            <span
              @click="toFind(scope.row)"
              style="color: #6b97eb;cursor: pointer;"
            >{{scope.row.amount}}</span>
          </template>
        </el-table-column>

        <el-table-column
          :key="item.value"
          v-else-if="item.value=='opt'"
          label="操作"
          min-width="100px"
          align="center"
        >
          <template slot-scope="scope">
            <el-button @click="drillDown(scope.row)" type="text" size="small">下钻</el-button>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div style="padding:20px 0" v-if="tableData.length>0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="ScheduleCurrentChange"
        :current-page="pages.pagenum"
        :page-sizes="[10,20, 30, 50,100]"
        :page-size="pages.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total"
        background
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      allData: [
        {
          label: "人员名称",
          value: "name"
        }, {
          label: "工号",
          value: "name"
        }, {
          label: "手机号码",
          value: "telnum"
        }, {
          label: "部门",
          value: "department"
        }, {
          label: "岗位角色",
          value: "position"
        },
        {
          label: "服务站级别",
          value: "level"
        },
        {
          label: "权限范围",
          value: "range"
        },
        {
          label: "处理的事件数量",
          value: "amount"
        },
        {
          label: "操作",
          value: "opt"
        }
      ],
      tableData: [],
      pages: {
        pagesize: 10,
        total: 0,
        pagenum: 1,
      },
      loading: false,
      userid: this.$route.params.userid,
      type: this.$route.params.type
    }
  },
  created () {
    this.lowerBrickList();
  },
  methods: {
    //下砖请求
    lowerBrickList (userid) {
      this.$axios.post('/app/v1/platform/unusual/drillDownList', {
        "userid": userid || this.userid,
        "type": this.type,
        pagesize: this.pages.pagesize,
        pagenum: this.pages.pagenum,
      }).then(resp => {
        if (resp.data.message === 'success.') {
          this.tableData = resp.data.data.list;
          this.pages.total = Number(resp.data.data.totalnum);
          this.pages.pagesize = Number(resp.data.data.pagesize);
          this.loading = false;
        }
      })
    },
    goBack () {
      // this.$router.go(-1); //返回上一层
      this.$router.back(-1)
    },
    drillDown (row) {
      this.$router.push({
        name: 'lowerBrickList', //跳转的路径
        params: {
          type: this.type,
          userid: row.userid
        }
      })
    },
    toFind (row) {
      this.$router.push({
        name: 'systemlog', //跳转的路径
        params: {
          type: this.type,
          userid: row.userid
        }
      })
    },
    handleSizeChange (val) {
      this.pages.pagenum = 1;
      this.pages.pagesize = val;
      this.lowerBrickList();
    },
    //分页查询
    ScheduleCurrentChange (val) {
      this.pages.pagenum = val;
      this.lowerBrickList();
    },
  },
  watch: {
    '$route' (to, from) {
      let userid = to.params.userid;
      this.lowerBrickList(userid)
    }
  }
}
</script>
<style>
.lowerBrickList {
  background: #fff;
  padding: 0 20px;
}
.backBtn {
  background: #fff;
  padding: 0px;
  border-bottom: 1px solid #d2d2d2;
  height: 60px;
}

.back-left {
  cursor: pointer;
  padding: 10px 0;
  height: 60px;
  width: 70px;
  display: flex;
  align-items: center;
}

.back-left span {
  color: #a1a1a1;
  padding-left: 4px;
}

.back-left i {
  color: #0064e4;
}
</style>


